<template>
    <div>
        <h1 class="request">还没有门店.立即申请！</h1>
        <el-button type="primary" @click="handleRequest" class="now">立即申请</el-button>
        <el-dialog width="40%" title="申请门店" :visible.sync="visForAddPos" center>
            <el-form :model="parForAddPos" ref="parForAddPos" :rules="rulesForAddPos" label-width="100px" class="demo-ruleForm">
                <el-form-item label="门店名" prop="name" label-width="150px">
                    <el-input type="text" v-model="parForAddPos.name" autocomplete="off" clearable></el-input>
                </el-form-item>
                <el-form-item label="营业执照号码" prop="licenseNumber" label-width="150px">
                    <el-input type="text" v-model="parForAddPos.licenseNumber" autocomplete="off" clearable></el-input>
                </el-form-item>
                <el-form-item label="营业执照图片" prop="licenseImg" label-width="150px">
                    <el-upload
                        class="avatar-uploader"
                        :action="url"
                        :show-file-list="false"
                        :on-success="handleLicenseImgSuccess"
                        :before-upload="beforeImgUpload"
                    >
                        <img v-if="parForAddPos.licenseImg" :src="parForAddPos.licenseImg" class="avatar" />
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="地址" prop="address" label-width="150px">
                    <el-input type="text" v-model="parForAddPos.address" autocomplete="off" clearable></el-input>
                </el-form-item>
                <el-form-item label="经度" prop="x" label-width="150px">
                    <el-input type="text" v-model="parForAddPos.x" autocomplete="off" clearable></el-input>
                </el-form-item>
                <el-form-item label="纬度" prop="y" label-width="150px">
                    <el-input type="text" v-model="parForAddPos.y" autocomplete="off" clearable></el-input>
                </el-form-item>
                <el-form-item label="城市" prop="city" label-width="150px">
                    <el-input type="text" v-model="parForAddPos.city" autocomplete="off" clearable></el-input>
                </el-form-item>
                <el-form-item label="法人" prop="corporation" label-width="150px">
                    <el-input type="text" v-model="parForAddPos.corporation" autocomplete="off" clearable></el-input>
                </el-form-item>
                <el-form-item label="联系电话" prop="phone" label-width="150px">
                    <el-input type="text" v-model="parForAddPos.phone" autocomplete="off" clearable></el-input>
                </el-form-item>
                <el-form-item label="头像" prop="headImg" label-width="150px">
                    <el-upload
                        class="avatar-uploader"
                        :action="url"
                        :show-file-list="false"
                        :on-success="handleHeadImgSuccess"
                        :before-upload="beforeImgUpload"
                    >
                        <img v-if="parForAddPos.headImg" :src="parForAddPos.headImg" class="avatar" />
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="特色" prop="feature" label-width="150px">
                    <el-input type="text" v-model="parForAddPos.feature" autocomplete="off" clearable></el-input>
                </el-form-item>
                <el-form-item label="vip等级" prop="vip" label-width="150px">
                    <el-input type="text" v-model="parForAddPos.vip" autocomplete="off" clearable></el-input>
                </el-form-item>
                <el-form-item label="佣金比例" prop="commission" label-width="150px">
                    <el-input type="text" v-model="parForAddPos.commission" autocomplete="off" clearable></el-input>
                </el-form-item>
                <el-form-item label="店员姓名" prop="name" label-width="150px">
                    <el-input type="text" v-model="parForAddPos.clerks[0].name" autocomplete="off" clearable></el-input>
                </el-form-item>
                <el-form-item label="店员手机号" prop="tel" label-width="150px">
                    <el-input type="text" v-model="parForAddPos.clerks[0].tel" autocomplete="off" clearable></el-input>
                </el-form-item>
                <el-form-item label="店员年龄" prop="age" label-width="150px">
                    <el-input type="text" v-model="parForAddPos.clerks[0].age" autocomplete="off" clearable></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleForAddPosCancel">取消</el-button>
                    <el-button type="primary" @click="handleForAddPosRight">确定</el-button>
                    <el-button type="primary" @click="handleForAddPosReset('parForAddPos')">重置</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        
    </div>
    
</template>

<script>
import { getPosList, updatePos, delPos, addPos, searchPos, uoploadPos,getone,link } from '@/api/pos.js';
import { log } from 'util';
export default {
    data() {
      return {
        visForAddPos: false,
            url: this.globalConfig.UPLOAD_URL,
         parForAddPos: {
                state:"0",
                name: '',
                licenseNumber: '',
                licenseImg: '',
                address: '',
                x: '',
                y: '',
                city: '',
                corporation: '',
                phone: '',
                headImg: '',
                feature: '',
                vip: '',
                commission: '',
                clerks: [
                    {
                        name: '',
                        tel: '',
                        age: ''
                    }
                ]
            },
            rulesForAddPos: {
                name: [{ required: true, message: '门店名不能为空', trigger: 'blur' }],
                licenseNumber: [{ required: true, message: '营业执照不能为空', trigger: 'blur' }],
                licenseImg: [{ required: true, message: '请上传营业执照图片', trigger: 'blur' }],
                address: [{ required: true, message: '地址不能为空', trigger: 'blur' }],
                x: [{ required: true, message: '经度不能为空', trigger: 'blur' }],
                y: [{ required: true, message: '纬度不能为空', trigger: 'blur' }],
                city: [{ required: true, message: '城市名不能为空', trigger: 'blur' }],
                corporation: [{ required: true, message: '法人不能为空', trigger: 'blur' }],
                phone: [{ required: true, message: '联系电话不能为空', trigger: 'blur' }],
                headImg: [{ required: true, message: '请上传头像', trigger: 'blur' }],
                feature: [{ required: true, message: '特色不能为空', trigger: 'blur' }],
                vip: [{ required: true, message: 'vip等级不能为空', trigger: 'blur' }],
                commission: [{ required: true, message: '佣金比例不能为空', trigger: 'blur' }],
                // tel: [{ required: true, message: '店员电话不能为空', trigger: 'blur' }],
                // age: [{ required: true, message: '店员年龄不能为空', trigger: 'blur' }]
            },
      }
    },
    methods:{
      handleRequest(){
        this.visForAddPos=true;
      },
      //reset
        handleForAddPosReset(form) {
            this.$refs[form].resetFields();
        },
        //cancel
        handleForAddPosCancel() {
            this.visForAddPos = false;
        },
        //submit
        handleForAddPosRight() {
          addPos(JSON.stringify(this.parForAddPos)).then(res=>{
              let {_id}=res;
              link({_id:_id,adminName:localStorage.getItem('ms_adminName')}).then(res=>{
                  history.go(0);
        });
          });
          
        
        
          this.visForAddPos=false;
        },
        handleLicenseImgSuccess(res, file,fileList) {
            this.parForAddPos.licenseImg='http://localhost:3001'+file.response;
        },
        handleHeadImgSuccess(res, file,fileList) {
            this.parForAddPos.headImg='http://localhost:3001'+file.response;
            
        },
        beforeImgUpload(file) {
            const isJPG = file.type === 'image/jpeg' || 'image/png';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 和 PNG 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        },
    }
};
</script>

<style scoped>
.now{
  margin: auto;
  display: block;
  width:150px;
  height: 50px;
}
.request {
    width: 700px;
    height: 200px;
    margin: auto;
    font-weight: bold;
    font-size: 60px;
    padding: 80px 0;
    color: darkorange;
}
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.avatar-uploader .el-upload:hover {
    border-color: #409eff;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}
.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>>